<template>
  <a-card :bordered="false" style="margin-top: 24px" title="系统主机" class="ant-pro-components-tag-select">
    <div class="table-operator">
      <a-button type="primary" class="btn-success" icon="plus" @click="handleAdd()">新建</a-button>
    </div>

    <a-table
      :columns="columns"
      :data-source="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      rowKey="node"
    >
      <span slot="action" slot-scope="text, record">
        <a @click="handleEdit(record)">修改</a>
        <a-divider type="vertical" />
        <a @click="showDeleteModal(record)">删除</a>
      </span>
    </a-table>
    
    <host-create-modal ref="hostCreateModal" @ok="handleOk" />
    <host-edit-modal ref="hostEditModal" @ok="handleOk" />
  </a-card>
</template>

<script>
import { sqlSelect, sqlFindOne, sqlDelete } from '@/api/sql'
import hostCreateModal from './modules/hosts/createModal'
import hostEditModal from './modules/hosts/editModal'

export default {
  name: 'CmdbHostList',

  components: {
    hostCreateModal,
    hostEditModal
  },

  data () {
    return {
      loading: false,

      pagination: {
        page: 0,
        defaultPageSize: 10,
        pageNo: 1,
        pageSize: 10,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '50', '100'],
        showTotal: (total) => this.$t('pagination.total') + ` ${total} ` + this.$t('pagination.items'),
        total: 0
      },
      
      columns: [
        {
          title: '主机名称',
          dataIndex: 'node',
          key: 'node'
        },
        {
          title: '主机地址',
          dataIndex: 'node_alias',
          key: 'node_alias'
        },
        {
          title: '功能描述',
          dataIndex: 'node_func',
          key: 'node_func',
          align: 'center'
        },
        {
          title: '业务应用',
          dataIndex: 'app_name',
          key: 'app_name',
          align: 'center'
        },
        {
          title: '所属平台',
          dataIndex: 'pcs_name',
          key: 'pcs_name',
          align: 'center'
        },
        {
          title: '数据中心',
          dataIndex: 'location',
          key: 'location',
          align: 'center'
        },
        {
          title: '组织部门',
          dataIndex: 'org_name',
          key: 'org_name',
          align: 'center'
        },
        {
          title: '系统类型',
          dataIndex: 'os_type',
          key: 'os_type',
          align: 'center'
        },
        {
          title: '系统版本',
          dataIndex: 'os_level',
          key: 'os_level',
          align: 'center'
        },
        {
          title: '是否纳管',
          dataIndex: 'sub_system_name',
          key: 'sub_system_name',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          width: 160,
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ],

      data: []
    }
  },

  mounted () {
    this.getData(this.pagination.page, this.pagination.pageSize)
  },

  methods: {
    /*
     * 切换分页后重新请求数据
     *
     * TODO:
     * - 如何实现filters/sorter逻辑? 如通过业务应用/主机名称/主机地址对列表结果进行过滤
     */
    handleTableChange (pagination, filters, sorter) {
      this.pagination.pageSize = pagination.pageSize
      this.pagination.page = pagination.current - 1
      this.getData(this.pagination.page, this.pagination.pageSize)
    },

    /*
     * 获取数据
     */
    async getData (page, size) {
      this.data = await this.getList(page, size)
      this.pagination.total = await this.getTotal()
    },

    /*
     * 获取数据列表
     */
    getList (page, size) {
      const params = {
        sql: `select * from cmdb.hosts order by app_name, node asc offset ${page}*${size} limit ${size}`
      }
      return new Promise((resolve, reject) => {
        sqlSelect(params).then(
          (res) => {
            resolve(res)
          },
          (error) => {
            console.log(error)
            resolve(error)
          }
        )
      })
    },

    /*
     * 获取数据总数
     */
    getTotal () {
      const params = {
        sql: 'select count(*) as total from cmdb.hosts'
      }
      return new Promise((resolve, reject) => {
        sqlFindOne(params).then(
          (res) => {
            resolve(res.total)
          },
          (error) => {
            console.log(error)
            resolve(error)
          }
        )
      })
    },

    /*
     * 修改数据条目
     */
    handleEdit (record) {
      this.$refs.hostEditModal.init(record['node'], record['node_alias'])
    },

    /*
     * 新建数据条目
     */
    handleAdd () {
      this.$refs.hostCreateModal.init()
    },

    /*
     * 删除弹框
     */
    showDeleteModal (record) {
      this.$confirm({
        title: '提示',
        content: '确定删除数据吗?',
        okText: '确定',
        cancelText: '取消',

        onOk: () => {
          console.log('OK')
          this.delete(record['node'], record['node_alias']).then((res) => {
            this.$notification['success']({
              message: '提示',
              description: '数据删除成功'
            })

            // 重新请求数据
            this.getData(this.pagination.page, this.pagination.pageSize)
          })
        },

        onCancel () {
          console.log('Cancel')
        }
      })
    },

    /*
     * 删除数据条目
     */

    delete (node, nodeAlias) {
      const params = {
        sql: `delete from cmdb.hosts where node='${node}' and node_alias='${nodeAlias}'`
      }
      return new Promise((resolve, reject) => {
        sqlDelete(params).then(
          (res) => {
            resolve(res)
          },
          (error) => {
            console.log(error)
            resolve(error)
          }
        )
      })
    },

    /*
     * 刷新数据
     */
    handleOk () {
      this.getData(this.pagination.page, this.pagination.pageSize)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
